<template>
  <div style="margin-left: 15px; margin-right: 15px">
    <h2>课程管理</h2>
    <el-button type="primary" icon="el-icon-plus" @click="addSubject"
      >添加课程信息</el-button
    >

    <el-table :data="subjectManagementInfo" style="margin-top: 10px">
      <el-table-column label="课程号" width="100" type="index" align="center">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="课程名称"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="teacherIndex"
        label="授课老师编号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="attendClassTime"
        label="上课时间"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="attendClassAddress" label="上课地点" width="100">
      </el-table-column>
      <el-table-column prop="weekNumber" label="周数" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="subjectType"
        label="课程类型"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="hourCredit" label="学分" width="60" align="center">
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="150">
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="changeSubject(row, $index)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="deleteSubject($index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加课程信息 -->
    <el-dialog
      :title="this.subjectForm.subject ? '修改课程' : '添加课程'"
      :visible.sync="dialogFormVisible"
      center="center"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="课程名称">
          <el-input v-model="subjectForm.subject" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="授课老师编号">
          <el-input
            v-model="subjectForm.teacherIndex"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-input
            v-model="subjectForm.attendClassTime"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-input
            v-model="subjectForm.attendClassAddress"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="周数">
          <el-input v-model="subjectForm.weekNumber" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="subjectForm.subjectType" placeholder="请选择课程">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学分 ">
          <el-input v-model="subjectForm.hourCredit" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: "Coursemanagement",
  components: {},
  data() {
    return {
      options: [
        {
          value: "必修课",
          label: "必修课",
        },
        {
          value: "选修课",
          label: "选修课",
        },
        {
          value: "公共任选课",
          label: "公共任选课",
        },
        {
          value: "专业选修课",
          label: "专业选修课",
        },
      ],
      subjectManagementInfo: [],
      dialogFormVisible: false,
      subjectForm: {
        subject: "",
        teacherIndex: "",
        attendClassTime: "",
        attendClassAddress: "",
        weekNumber: "",
        subjectType: "",
        hourCredit: "",
      },
      index: "",
    };
  },
  methods: {
    async getCourseManagementInfo() {
      let subjectManagementInfo = await import(
        "@/data/subjectmanagementInfo.json"
      );
      this.subjectManagementInfo = subjectManagementInfo.subjectInfo;
    },
    // 添加课程
    addSubject() {
      this.subjectForm = {};
      this.dialogFormVisible = true;
    },

    //保存课程
    handler() {
      if (this.index >= 0) {
        this.subjectManagementInfo.splice(this.index, 1, this.subjectForm);
      } else {
        this.subjectManagementInfo.unshift(this.subjectForm);
      }
      this.dialogFormVisible = false;
      this.$message({
        type: "success",
        message: this.subjectForm.subject ? "修改课程成功" : "添加课程成功",
        offset: 120,
      });
    },
    //修改课程
    changeSubject(row, index) {
      this.index = index;
      console.log(row);
      //深拷贝反正操作同一个地址
      this.subjectForm = { ...row };
      this.dialogFormVisible = true;
    },
    //删除课程
    deleteSubject(index) {
      this.subjectManagementInfo.splice(index, 1);
      this.$message({
        type: "success",
        offset: 120,
        message: "删除成功",
      });
    },
  },

  mounted() {
    this.getCourseManagementInfo();
  },
};
</script>


<style scoped>
h2 {
  text-align: center;
}
</style>